<template>
    <div class="component-zhe-group">
        <router-link :to="list.to || ''">
            <van-cell-group>
                <van-cell is-link :value="list.value || ''">
                    <template slot="icon" v-if="list.icon">
                        <img class="van-cell__left_icon" :src="list.icon" />
                    </template>
                    <template slot="title">
                        <span class="van-cell-text">{{list.title}}</span>
                    </template>
                </van-cell>
            </van-cell-group>
        </router-link>
    </div>
</template>

<style lang="less">
    @import '../style/variable';
    
    .component-zhe-group {
        .van-cell {
            font-size: 1.5rem;
            line-height: 2.6rem;
            padding: 0.8rem 1.5rem;
            align-items: center;
            color: #000;
            .van-cell__left_icon {
                width: 2.9rem;
                height: 2.9rem;
            }
            .van-cell__value {
                font-size: 1.1rem;
                color: #888;
            }
            .van-cell__right-icon {
                font-size: 1.4rem;
                line-height: 2.6rem;
            }
        }
    }
    
</style>

<script>
    import { Cell, CellGroup } from 'vant';
    export default {
        props: ['list'],
        components: {
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
        },
    }
</script>